<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>

<div class="container" th:fragment="customerInfo(status,CurrentId,c,stringCreateTime,stringLastedTime,stringUpdateTime,serviceTime,goodReview,updateTime,WorkOrderList,cs,blackLists,realName,blackTime)" th:if="${status} eq 51">

    <div class="row">

        <!--  客户个人信息框 -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <!--   客户个人信息表  -->
                    <div class="pricing-table m-b-20">
                        <h2 class="m-b-20 text-uppercase font-size-30" align="center">客户信息</h2>
                        <ul class="m-b-30 m-t-30 list-group list-group-flush">
                            <li class="list-group-item d-flex align-items-center">客户ID：<span align="center" th:text="${c.getId()}"></span></li>
                            <li class="list-group-item d-flex align-items-center">客户名称：<span align="center" th:text="${c.getCustomername()}"></span></li>
                            <li class="list-group-item d-flex align-items-center">真实姓名：<span align="center" th:text="${c.getRealname()}"></span></li>
                            <li class="list-group-item d-flex align-items-center">电话：<span align="center" th:text="${c.getPhone()}"></span></li>
                            <li class="list-group-item d-flex align-items-center">email：<span align="center" th:text="${c.getEmail()}"></span></li>
                            <li class="list-group-item d-flex align-items-center">公司：<span align="center" th:text="${c.getCompany()}"></span></li>
                            <li class="list-group-item d-flex align-items-center">地址：<span align="center" th:text="${c.getAddress()}"></span></li>
                            <li class="list-group-item d-flex align-items-center">级别：<span align="center" th:text="${c.getLevel()}"></span></li>
                            <li class="list-group-item d-flex align-items-center">途径：<span align="center" th:text="${c.getChannel()}"></span></li>
                            <li class="list-group-item d-flex align-items-center">标签ID：<span align="center" th:text="${c.getTagsid()}"></span></li>
                            <li class="list-group-item d-flex align-items-center">标注：<span align="center" th:text="${c.getRemark()}"></span></li>
                            <li class="list-group-item d-flex align-items-center">客服ID：<span align="center" th:text="${c.getCustomerserviceid()}"></span></li>
                            <li class="list-group-item d-flex align-items-center">最后登录时间：<span align="center" th:text="${stringLastedTime}"></span></li>
                            <li class="list-group-item d-flex align-items-center">创建时间：<span align="center" th:text="${stringCreateTime}"></span></li>
                            <li class="list-group-item d-flex align-items-center">更新时间：<span align="center" th:text="${stringUpdateTime}"></span></li>
                        </ul>
                    </div>

                    <div class="app-action " style="margin-bottom: 15px" >
                        <!--   修改个人信息按钮 -->
                        <div class="text-center" align="center">
                            <button class="btn btn-outline-primary btn-block " data-toggle="modal" data-target="#createEventModal-cs">
                                修改客户信息
                            </button>
                        </div>

                        <!--  begin 修改个人信息弹出框-->
                        <div class="modal fade" id="createEventModal-cs" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog  " role="document">
                                <div class="modal-content">
                                    <div class="modal-header" >
                                        <h5 class="modal-title">修改客户信息</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <i class="ti-close"></i>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <form autocomplete="off" class="form-group" action="/customerManage/updateCustomer">
                                            <div class=" row">
                                                <label class="col-sm-3 col-form-label" >客户ID</label>
                                                <div class="col-sm-9">
                                                    <h4 name="id">[[${c.getId()}]]</h4>
                                                </div>
                                            </div>
                                            <div class=" row">
                                                <label class="col-sm-3 col-form-label" id="event-title">客户名称</label>
                                                <div class="col-sm-9">
                                                    <input  type="text" class="form-control" th:value="${c.getCustomername()}" name="customername">
                                                </div>
                                            </div>
                                            <div class=" row">
                                                <!--                                                <span style="color:red">*</span>-->
                                                <label class="col-sm-3 col-form-label" >真实姓名&nbsp</label>
                                                <div class="col-sm-9">
                                                    <input  type="text" class="form-control" th:value="${c.getRealname()}" name="realname"  required="required" >
                                                </div>
                                            </div>
                                            <div class="row">
                                                <label class="col-sm-3 col-form-label" >电话&nbsp</label>
                                                <div class="col-sm-9">
                                                    <input  type="text" class="form-control" th:value="${c.getPhone()}" name="phone">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <label class="col-sm-3 col-form-label">email</label>
                                                <div class="col-sm-9">
                                                    <input  type="text" class="form-control" th:value="${c.getEmail()}" name="email">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <label class="col-sm-3 col-form-label">公司</label>
                                                <div class="col-sm-9">
                                                    <input  type="text" class="form-control" th:value="${c.getCompany()}" name="company">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <label class="col-sm-3 col-form-label">地址</label>
                                                <div class="col-sm-9">
                                                    <input  type="text" class="form-control" th:value="${c.getAddress()}" name="address">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <label class="col-sm-3 col-form-label" >级别&nbsp</label>
                                                <div class="col-sm-9">
                                                    <input  type="text" class="form-control" th:value="${c.getLevel()}" name="level">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <label class="col-sm-3 col-form-label">途径</label>
                                                <div class="col-sm-9">
                                                    <input  type="text" class="form-control" th:value="${c.getChannel()}" name="channel">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <label class="col-sm-3 col-form-label">标签ID</label>
                                                <div class="col-sm-9">
                                                    <input  type="text" class="form-control" th:value="${c.getTagsid()}" name="tagsid">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <label class="col-sm-3 col-form-label">标签</label>
                                                <div class="col-sm-9">
                                                    <input  type="text" class="form-control" th:value="${c.getRemark()}" name="remark">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <label class="col-sm-3 col-form-label" >客服ID&nbsp</label>
                                                <div class="col-sm-9">
                                                    <input  type="text" class="form-control" th:value="${c.getCustomerserviceid()}" name="customerserviceid">
                                                </div>
                                            </div>

                                            <div class="form-group " align="center">
                                                <label class="col-sm-3"></label>
                                                <div class="col-sm-9">
                                                    <button type="submit" id="btn-save" class="btn btn-primary">
                                                        <i data-feather="send" class="mr-2"></i>
                                                        确定
                                                    </button>
                                                </div>

                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--  end  修改个人信息弹出框 -->

                        <!-- begin::Event Info Modal -->
                        <div class="modal fade" id="viewEventModal" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">
                                            <span class="event-icon mr-2"></span>
                                            <span class="event-title">Modal Title</span>
                                        </h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <i class="ti-close"></i>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="event-body"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end::Event Info Modal -->

                    </div>


                </div>
            </div>
        </div>

        <div class="col-md-8">
            <div class="card bg-success-bright">
                <div class="card-body">
                    <div class="pricing-table selected-pricing-table m-b-20">
                        <div class="row">
                            <!--   客户名  -->
                            <h1 class="m-b-20 ml-3 font-weight-bold">
                                <span th:text="${c.getRealname()}" class="font-size-35"></span>

                            </h1>
                            <!--   发起会话 -->
                            <div  class="ml-4 mt-3">
                                <a href="/session/new" data-toggle="tooltip">
                                    <i class="ti-share mr-2"></i>
                                </a>
                            </div>

                        </div>

                        <ul class="nav nav-tabs mb-3" role="tablist">

                            <li class="nav-item " >
                                <a class="nav-link active " style="color: black" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
                                   aria-controls="profile" aria-selected="false">历史工单</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link " style="color: black" id="home-tab" data-toggle="tab" href="#home" role="tab"
                                   aria-controls="home" aria-selected="true">历史会话</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" style="color: black" id="contact-tab" data-toggle="tab" href="#contact" role="tab"
                                   aria-controls="contact" aria-selected="false">拉黑记录</a>
                            </li>

                        </ul>
                        <div class="tab-content">

                            <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table class="table table-striped table-hover">
                                                <thead>
                                                <tr>
                                                    <th scope="col" class="text-center p-t-b-40">工单ID</th>
                                                    <th scope="col" class="text-center p-t-b-40">工单标题</th>
                                                    <th scope="col" class="text-center p-t-b-40">工单渠道</th>
                                                    <th scope="col" class="text-center p-t-b-40">工单状态</th>
                                                    <th scope="col" class="text-center p-t-b-40">客户姓名</th>
                                                    <th scope="col" class="text-center p-t-b-40">最后更新时间</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr th:each="workorder1,rowInfo:${WorkOrderList}" class="text-center">
                                                    <td th:text="${workorder1.getId()}"></td>
                                                    <td th:text="${workorder1.getTitle()}"></td>
                                                    <td th:text="${workorder1.getChannel()}"></td>
                                                    <td th:text="${workorder1.getState()}"></td>
                                                    <td th:text="${c.getRealname()}"></td>
                                                    <td th:text="${updateTime[rowInfo.count]}"></td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade " id="home" role="tabpanel" aria-labelledby="home-tab">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table class="table table-striped table-hover">
                                                <thead>
                                                <tr>
                                                    <th scope="col" class="text-center p-t-b-40">访问时间</th>
                                                    <th scope="col" class="text-center p-t-b-40">来源</th>
                                                    <th scope="col" class="text-center p-t-b-40">客服id</th>
                                                    <th scope="col" class="text-center p-t-b-40">受理客服组</th>
                                                    <th scope="col" class="text-center p-t-b-40">访问时长/min</th>
                                                    <th scope="col" class="text-center p-t-b-40">满意度</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr class="text-center">
                                                    <td th:text="${stringCreateTime}"></td>
                                                    <td th:text="${c.getChannel()}"></td>
                                                    <td th:text="${c.getCustomerserviceid()}"></td>
                                                    <td th:text="${cs.getServicegroup()}"></td>
                                                    <td th:text="${serviceTime}"></td>
                                                    <td th:text="${goodReview}"></td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table class="table table-striped table-hover">
                                                <thead>
                                                <tr>
                                                    <th scope="col" class="text-center p-t-b-40">拉黑时间</th>
                                                    <th scope="col" class="text-center p-t-b-40">操作客服</th>
                                                    <th scope="col" class="text-center p-t-b-40">拉黑来源</th>
                                                    <th scope="col" class="text-center p-t-b-40">拉黑原因</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr th:each="black,rowInfo:${blackLists}" class="text-center">
                                                    <td th:text="${blackTime[rowInfo.count]}"></td>
                                                    <td th:text="${realName[rowInfo.count]}"></td>
                                                    <td th:text="${black.getSource()}"></td>
                                                    <td th:text="${black.getReason()}"></td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>

    </div>

</div>


</body>
</html>